let html = document.querySelector('#html');
let style = document.querySelector('#style');

let str = `
/* 
 * 我是月饼
 * 下面是一个八卦图
**/
#div1{
    border: 1px solid black;
    width : 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0, 0, 3px rgba(0, 0, 0, 0.5);
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%);
}

#div1::before{
    width : 100px;
    height : 100px;
    border : 1px solid black;
    top : 0;
    left: 50%;
    transform : translateX(-50%);
    background : #000;
    border-radius : 50%;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%);
}

#div1::after{
    width : 100px;
    height : 100px;
    border : 1px solid white;
    bottom : 0;
    left: 50%;
    transform : translateX(-50%);
    background : #fff;
    border-radius : 50%;
    background: rgb(0,0,0);
    background: radial-gradient(circle, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%);
}

#div1{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
`;

// div::before和div::after用到了伪元素选择器

let str2 = '';
let n = 0;

let step = () => {
    setTimeout(() => {
        // 该if判断的目的是在于将js字符串中的回车和空格转换为html中的空格和字符
        if(str[n] === '\n'){
            str2 += '<br>';
        }else if(str[n] === ' '){
            str2 += '&nbsp;';
        }else{
            str2 += str[n];
        }
        html.innerHTML = str2;
        style.innerHTML = str.substring(0, n);
        window.scrollTo(0, 99999);
        html.scrollTo(0, 99999);
        // 要学会判断1
        if(n < str.length - 1){
            n++;
            step();
        }
    }, 30);
};

step()